<template>
  <div class="father">
    <h3>父组件</h3>
    <h4>房产:{{ house }}套</h4>
    <button @click="changeC1">修改child1的玩具与书籍</button>
    <button @click="changeC2">修改child2的电脑与书籍</button>
    <button @click="getAllChid($refs)">
      获取所有子组件的实例对象--传递$refs,把孩子书本增加
    </button>
    <Child1 ref="c1" />
    <Child2 ref="c2" />
  </div>
</template>

<script setup lang="ts" name="Father">
import { reactive, ref } from "vue";
import Child1 from "./Child1.vue";
import Child2 from "./Child2.vue";
let house = ref(4);
let c1 = ref();
let c2 = ref();

// 注意点：
// let obj = { a: 1, b: 2, c: ref(3) };
let obj = reactive({ a: 1, b: 2, c: ref(3) });

let x = ref(4);
console.log(obj.a, obj.b);
console.log(obj.c); //3  注意：ref(3)被reactive包裹，会自动解包ref(3),所以ref就不需要.value了
console.log(x.value);

function changeC1() {
  console.log(c1.value);
  c1.value.toy = "雪花片";
}
function changeC2() {
  console.log(c2.value);
  c2.value.computer = "MacBook Pro 16";
}
function getAllChid(val: { [key: string]: any }) {
  console.log("$refs", val);
  for (let i in val) {
    console.log(i);
    console.log(val[i]);
    val[i].count += 1;
  }
}
//defineExpose暴露给外面，让子也能调用到
defineExpose({ house });
</script>

<style scoped>
.father {
  background-color: rgb(165, 164, 164);
  padding: 20px;
  border-radius: 10px;
}
</style>
